<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./js/vue.js"></script>
    <div id='app'>
        {{firstName}}
        <br>
        {{lastName}}
        <br/>
        {{fullName}}
    </div>
    
    <script>
        let app =new Vue({
             el:"#app",
             data:{
               firstName:'Foo',
               lastName:'Bar',
            //    fullName:'Foo Bar'//验证计算属性这句话要注释
             },
             //data中没有定义相对的属性可以在计算属性中写入，而watch不可以，watch只能侦听事先定义好的。
             //watch与computed很相似，watch用于观察和监听页面上的Vue实例，大部分情况下使用的是computed
             //异步操作或者比较大的开销使用watch
             watch:{
                firstName:function(val){
                    this.fullName=val+" "+this.lastName;
                    console.log("触发了");
                },
                lastName:function(val){
                    this.fullName=this.firstName+" "+val;
                }
             },
             computed:{
                fullName:{
                    get:function(){
                        return this.firstName+" "+this.lastName;
                    },
                    set:function(newVal){
                        var names=newVal.split(' ');
                        this.firstName=names[0],
                        this.lastName=names[names.length-1]
                        console.log("改变了");
                    }
                }
             }
        })
    </script>
</body>
</html>